<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" media="screen" href="/css/partstyle.css">
<%@ include file="./pages/common_header.jsp"%>
<title>后台登录</title>
<script type="text/javascript" src="/js/checkCode.js"></script>
<script>
	function submitForm() {
		var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写
		if (inputCode.length <= 0) { //若输入的验证码长度为0  
			getTip("提示","请输入验证码！",500);			
		} else if (inputCode != code) { //若输入的验证码与产生的验证码不一致时   			
			getTip("提示","验证码错误,请重新输入!",500);		
			document.getElementById('input').focus();	//定位值文本框			
			createCode();//刷新验证码  
			document.getElementById("input").value = "";//清空文本框  
		} else { //输入正确时  
			$('#login').form('submit', {
				url : '${ctx }/manage/doLogin',
				dataType : 'json',
				success : function(result) {
					var json = $.parseJSON(result);
					if (json.success == 0) {
						window.location.href = "${ctx }/manage/main";
					} else if (json.success == 13) {
						alert("用户名或密码有错，请重新输入！");
						window.location.href = "${ctx }/manage";
					} else { 
						getTip("提示",json.msg,700);
						createCode();//刷新验证码  
						$('#input').val('');
					}
				}
			});
		}
	}
	function clearForm() {
		$('#login').form('clear');
	}
	//回车
	function checkInfo() {
			if (event.keyCode==13) {	
				 submitForm();
			 }	
	}
	//背景
	 var count_particles, stats, update;
 	 stats = new Stats;
  	 stats.setMode(0);
  	 stats.domElement.style.position = 'absolute';
  	 stats.domElement.style.left = '0px';
  	 stats.domElement.style.top = '0px';
   	 document.body.appendChild(stats.domElement);
  	 count_particles = document.querySelector('.js-count-particles');
  	 update = function() {
     stats.begin();
     stats.end();
     if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
      count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
     }
     requestAnimationFrame(update);
    };
    requestAnimationFrame(update);
</script>
<style type="text/css">
#code {
	font-family: Arial;
	font-style: normal;
	font-weight: bold;
	border: 0;
	letter-spacing: 2px;
	color: blue;
}
</style>
</head>
<body onload="createCode()" style="width:100%;height: 100%;" id="particles-js">
		<table align="center">
			<tr>
				<td><br>
					<div style="padding: 13px 0px 5px 25px; margin-left: 1000px" >
						<form id="login" method="post">
							<table cellpadding="3" border="0" style="margin-top: 210px">
								<tr height="40">
									<td>账&nbsp;&nbsp;&nbsp;号:&nbsp;&nbsp;&nbsp;</td>
									<td><input class="easyui-validatebox textbox" value="" 
										type="text" name="userName" data-options="required:true"
										maxlength="15" style="width: 160px; height: 25px"></input></td>
								</tr>
								<tr height="40">
									<td>密&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;&nbsp;</td>
									<td><input class="easyui-validatebox textbox" 
										type="password" value="" name="userPwd"
										data-options="required:true" maxlength="16"
										style="width: 160px; height: 25px"></input></td>
								</tr>
								<tr height="40">
									<td>验证码:&nbsp;&nbsp;&nbsp;</td>
									<td><input type="button" style="width: 80px; height: 25px"
										id="code" onclick="createCode()" />
										
										
										<input
										class="easyui-validatebox textbox" type="text" id="input"
										onkeypress="checkInfo();" name="code" maxlength="4"
										data-options="required:true"
										style="width: 75px; height: 25px; margin-left: 2px; vertical-align: middle"></input></td>
								</tr>
							</table>
						</form>
						<div style="text-align: center; padding: 2px">
							<a href="javascript:void(0)" class="easyui-linkbutton"
								style="width: 100px; height: 30px" onclick="submitForm()" value="super">&nbsp;登&nbsp;录&nbsp;</a>
				
							<a href="javascript:void(0)" class="easyui-linkbutton"
								style="width: 100px; height: 30px" onclick="clearForm()" value="super">&nbsp;取&nbsp;消&nbsp;</a>
						</div>
					</div>
				</td>
			</tr>
		</table>

<script src="/particlesJS/particles.js"></script>
<script src="/js/app.js"></script>
</body>
</html>